import React, { useState, useEffect } from 'react'
import { Card, Button, Table } from "antd"
import { findAllRole } from "@/apis/roleApi"
import MyDrawer from '@comp/MyDrawer'

export default function Role() {
    const [roles, setRoles] = useState([])
    const [open, setOpen] = useState(false)
    const [roleMenus, setRoleMenus] = useState([])
    const [roleId, setRoleId] = useState("")
    useEffect(() => {
        fetchData()
    }, [])
    const fetchData = async () => {
        const res = await findAllRole()
        console.log(res);
        setRoles(res.data.data)
    }
    const auth = (text) => {
        console.log(text);
        setRoleMenus(text.menus)
        setRoleId(text._id)
        setOpen(true)
    }
    const columns = [
        {
            title: '角色名字',
            dataIndex: 'name'
        },
        {
            title: '创建日期',
            dataIndex: 'createTime'
        },
        {
            title: '授权人',
            dataIndex: 'authUser',
        },
        {
            title: '授权日期',
            dataIndex: "authTime"
        },
        {
            title: '操作',
            width: "140px",
            render: (text) => {
                return (
                    <span>
                        <Button type='default'>删除</Button>&nbsp;&nbsp;
                        <Button type="dashed" onClick={() => auth(text)}>授权</Button>&nbsp;&nbsp;
                    </span>
                )
            }
        }
    ];
    const search = (
        <span>
            <Button type="primary">添加角色</Button>&nbsp;&nbsp;&nbsp;&nbsp;
        </span>
    )
    return (
        <div>
            <Card title={search} style={{ width: "100%" }}>
                <Table
                    columns={columns}
                    dataSource={roles}
                    bordered
                    rowKey="_id"
                    pagination={{ defaultPageSize: 5, showQuickJumper: true }}
                />
            </Card>
            {open ? <MyDrawer roleMenus={roleMenus} roleId={roleId}></MyDrawer> : null}

        </div>
    )
}
